<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		div[data-first-name]{
			color:#ff0000;
		}
	</style>
</head>
<body>
	<div id="xx" data-first-name="bb">123s <span>22</span></div>
	<div id="xx2">1235s</div>
	<script>
		console.log(document)
		var xx=document.getElementById("xx")
		console.log(xx.nodeType)
		console.log(xx.nodeName)
		console.log(xx.childNodes)
		console.log(xx.childNodes[0])
		console.log(xx.firstChild)
		console.log(xx.childNodes[0].nextSibling)
		console.log(xx.id)




		var yy=document.createElement("em")
		yy.id="hio"
		yy.className="hio"

		xx.appendChild(yy)

		var zz=document.querySelector('#xx2')
		document.body.removeChild(zz)

		// console.log(xx.getAttribute("data-name"))

		xx.dataset.firstName="cc"
		console.log(xx.dataset.firstName)

	</script>
</body>
</html>